/**
 * 绘制组件
 * Author: liuhong
 * Date: 2017-2-23
 */

import React from 'react';
import tool from '../../../../../utils/tool';

class Draw extends React.Component {
    render() {
        const { widget } = this.props;

        const bright = widget.color ? tool.isBrightColor(widget.color || '000000') : false;
        const {action} = widget, {share_way} = action;
        const icon_srcm = tool.getSrcmByTypeAndBright(widget.type, bright,share_way);

        const gradColor = tool.converionColor(widget.color);
        const grad = `linear-gradient(140deg, rgb(${  gradColor.R  },${  gradColor.G  },${  gradColor.B  }),#${  widget.color  })`;

        const inlineStyle = {
            borderRadius: `${widget.radius}px`,
            opacity: widget.opacity,
            background: (widget.custom && (widget.icon_src || widget.url)) ? 'none' : grad,
        };

        let innerNode = '';
        const customSrc = widget.custom && (widget.icon_src || widget.url);
        const isNotCustom = !widget.custom || !widget.icon_src && !widget.url && widget.icon_class;
        if (customSrc) {
            innerNode = <img ref="image" className="replaceImge" src={customSrc} />;
        }
        if (isNotCustom) {
            innerNode =
              (<div className="textimg" style={{ height: `${widget.height  }px`, width: 'auto' }}>
                <img className="jiaohuimg" style={{ verticalAlign: 'inherit', display: widget.icon ? 'inline' : 'none' }} src={icon_srcm} />
                <span className="jiaos" style={{ color: bright ? '#000' : '#FFF' }}>{widget.tip_text}</span>
              </div>);
        }
        return (
          <div className="widget-inline" style={inlineStyle}>
            {innerNode}
          </div>
        );
    }
}

export default Draw;
